[WPF] ComboBox Style problems with DisplayMemberPath

Posted by kornelijepetak on Stack Overflow See other posts from Stack Overflow or by kornelijepetak
Published on 2009-04-24T10:43:10Z Indexed on 2010/06/17 13:03 UTC
Read the original article Hit count: 599

Filed under:
|
|
|
|

I have a ComboBox and I have set the combo.ItemsSource property to a List object. The Book class contains two properties: "Abbreviation" and "Name".

I have set the ComboBox's DisplayMemberPath to "Abbreviation" but the following style that is set on the ComboBox does not display the Abbreviation property, but instead shows "Words.Book" which is the name of the class. The ComboBox drop-down displays a list correctly (Using the specified Abbreviation property). The problem is in the selected ComboBox item, the one displayed when the ComboBox' drop-down is closed.

I guess the problem is in ContentPresenter in DataTemplate but I was unable to find a successful solution. Currently the ContentPresenter's Content property is set to Content="{TemplateBinding Content} but I don't know if that's how it should be.

Any ideas how to show the property specified in DisplayMemberPath on the selected item?

Thank you

the code:

<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition />
			<ColumnDefinition Width="20" />
		</Grid.ColumnDefinitions>
		<Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="2" BorderThickness="1" Background="{DynamicResource ribbonTitleFade}" />
		<Border Grid.Column="0" CornerRadius="2,0,0,2" Margin="1,6,1,6" BorderBrush="{DynamicResource boSecE}" BorderThickness="0,0,1,0" />
		<Path x:Name="Arrow" Grid.Column="1" Fill="White" 
			  HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"
			  />
	</Grid>
	<ControlTemplate.Triggers>
		<Trigger Property="ToggleButton.IsMouseOver" Value="true">
			<Setter TargetName="Border" Property="Background" Value="{DynamicResource ribbonTitleFade}" />
		</Trigger>
		<Trigger Property="ToggleButton.IsChecked" Value="true">
			<Setter TargetName="Border" Property="Background" Value="{DynamicResource ribbonTitleFade}" />
		</Trigger>
		<Trigger Property="IsEnabled" Value="False">
			<Setter TargetName="Border" Property="Background" Value="Black" />
			<Setter TargetName="Border" Property="BorderBrush" Value="Black" />
			<Setter Property="Foreground" Value="Gray"/>
			<Setter TargetName="Arrow" Property="Fill" Value="Gray" />
		</Trigger>
	</ControlTemplate.Triggers>
</ControlTemplate>

<Style x:Key="comboBoxBorderTransparent" TargetType="Control">
	<Setter Property="BorderBrush" Value="{DynamicResource boPrimC}" />
</Style>


<Style x:Key="comboItemStyle" TargetType="ComboBoxItem">
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="{x:Type ComboBoxItem}">
				<Border x:Name="backBorder" >
					<StackPanel Orientation="Horizontal">
						<Rectangle x:Name="rectA" Stroke="White" Width="4" Height="4" Fill="#80FFFFFF" Margin="5,0,0,0" HorizontalAlignment="Left" />
						<TextBlock x:Name="text" Foreground="White" FontSize="10px">
							<ContentPresenter Margin="8,1,0,1"
											  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
											  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
											  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
											  />
						</TextBlock>
					</StackPanel>
				</Border>
				<ControlTemplate.Triggers>
					<Trigger Property="ComboBoxItem.IsMouseOver" Value="true">
						<Setter TargetName="rectA" Property="Stroke" Value="Black" />
						<Setter TargetName="rectA" Property="Fill" Value="#80000000" />
						<Setter TargetName="backBorder" Property="Background" Value="White"/>
						<Setter TargetName="text" Property="Foreground" Value="{DynamicResource boPrimC}"/>
					</Trigger>
				</ControlTemplate.Triggers>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

<DataTemplate x:Key="comboSelectedItemTemplate">
	<TextBlock Foreground="White" FontSize="10px">
		<ContentPresenter Content="{TemplateBinding Content}" />
	</TextBlock>
</DataTemplate>

<Style TargetType="ComboBox">
	<Setter Property="SnapsToDevicePixels" Value="true"/>
	<Setter Property="OverridesDefaultStyle" Value="true"/>
	<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
	<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
	<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
	<Setter Property="MinWidth" Value="60"/>
	<Setter Property="MinHeight" Value="20"/>
	<Setter Property="ItemContainerStyle" Value="{DynamicResource comboItemStyle}"/>
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="ComboBox">
				<Grid>
					<ToggleButton 
						Name="ToggleButton" Grid.Column="2" 
						Template="{StaticResource ComboBoxToggleButton}" 
						Focusable="false"
						IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
						ClickMode="Press">
					</ToggleButton>

					<ContentPresenter HorizontalAlignment="Center"
									  VerticalAlignment="Center"
									  Name="ContentSite"
									  IsHitTestVisible="False" 
									  Content="{TemplateBinding SelectionBoxItem}"
									  ContentTemplate="{DynamicResource comboSelectedItemTemplate}"
									  ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
									  Margin="3,3,23,3"
									  />

					<Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}"
						   AllowsTransparency="False" Focusable="False" PopupAnimation="Slide">
						<Grid Name="DropDown" SnapsToDevicePixels="True" 
							  MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
							<Border x:Name="DropDownBorder" Background="{DynamicResource ribbonTitleFade}"
									BorderThickness="1" BorderBrush="{DynamicResource boPrimC}" />
							<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
								<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
							</ScrollViewer>
						</Grid>
					</Popup>
				</Grid>
				<ControlTemplate.Triggers>
					<Trigger Property="HasItems" Value="false">
						<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
					</Trigger>
					<Trigger Property="IsEnabled" Value="false">
						<Setter Property="Foreground" Value="Black"/>
					</Trigger>
					<Trigger Property="IsGrouping" Value="true">
						<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
					</Trigger>
					<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
						<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="2"/>
						<Setter TargetName="DropDownBorder" Property="Margin" Value="0"/>
					</Trigger>
					<Trigger Property="IsEditable" Value="true">
						<Setter Property="IsTabStop" Value="false"/>
						<!--<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>-->
					</Trigger>
				</ControlTemplate.Triggers>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
	<Style.Triggers>
	</Style.Triggers>
</Style>

© Stack Overflow or respective owner

Related posts about wpf

Related posts about combobox